<template>
  <el-dialog
    :title="dialogInfo.title"
    :visible.sync="dialogTableVisible"
    @close="dialogClose"
  >
    <el-form :model="stuForm" :rules="rules" ref="addStuRuleForm">
      <el-form-item label="头像">
        <el-upload
          class="uploadAvatar"
          ref="uploadAvatar"
          action="http://chst.vip/students/uploadStuAvatar"
          list-type="picture-card"
          name="headimgurl"
          :multiple="false"
          :on-success="uploadSuccess"
          :on-remove="removeAvatar"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="姓名" prop="name">
        <el-input v-model="stuForm.name" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="项目地址" prop="productUrl">
        <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="班级" prop="class">
        <el-input v-model="stuForm.class" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input v-model="stuForm.age" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="城市" prop="city">
        <el-input v-model="stuForm.city" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="学历" prop="degree">
        <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="描述" prop="description">
        <el-input v-model="stuForm.description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogTableVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmClick('addStuRuleForm')"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogInfo: {
        title: "增加学员信息",
        action: "add", //操作是增加还是编辑
        editSuccessMsg: "增加成功",
        editerrorMsg: "增加失败",
      },
      rules: {
        name: [{ required: true, message: "请输入名字", trigger: "blur" }],
        class: [{ required: true, message: "请输入班级", trigger: "blur" }],
        degree: [{ required: true, message: "请输入学历", trigger: "blur" }],
        city: [{ required: true, message: "请输入城市", trigger: "blur" }],
        productUrl: [
          { required: true, message: "请输入项目地址", trigger: "blur" },
        ],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
      },
      dialogTableVisible: false,
      showAvatar: true,
      stuForm: {
        name: "",
        productUrl: "",
        headimgurl: "",
        class: "",
        age: "",
        city: "",
        degree: "",
        description: "",
      },
      oldForm: {},
    };
  },
  mounted() {
    // 储存没有输入值的stuForm对象
    this.oldForm = { ...this.stuForm };
    this.$bus.$on("addStu", () => {
      // 增加学员信息
      this.dialogTableVisible = true;
      this.dialogInfo.title = "增加学员信息";
      this.dialogInfo.action = "add";
    });
    this.$bus.$on("editStu", (row) => {
      // 编辑学员信息
      this.dialogTableVisible = true;
      this.stuForm = row;
      this.dialogInfo.title = "编辑学员信息";
      this.dialogInfo.action = "edit";
    });
  },
  methods: {
    // 点击取消按钮 dialog关闭时触发的回调 清空输入框的值
    dialogClose() {
      console.log("999");
      this.stuForm = this.oldForm;
    },
    removeAvatar() {},
    uploadSuccess(r) {
      console.log(r);
      this.stuForm.headimgurl = r.headimgurl;
    },
    confirmClick(formName) {
      let _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 校验成功
          if (_this.dialogInfo.action === "add") {
            this.$bus.$emit("adding", this.stuForm);
            this.dialogTableVisible = false;
            this.stuForm = this.oldForm; //清空输入框的值
            // 调用这个方法 清空头像
            this.$refs.uploadAvatar.clearFiles();
            this.$message.success("添加信息成功");
          } else {
            this.$bus.$emit("adding", this.stuForm);
            this.dialogTableVisible = false;
            this.stuForm = this.oldForm; //清空输入框的值
          }
        } else {
          this.$message.error("请将内容填写完整");
        }
      });
    },
  },
};
</script>
<style scoped>
.uploadAvatar {
  text-align: left;
}
</style>
